<template>
  <div class="brief">
    <ol>
      <li >
        <p>{{ dataBrife.intro }}</p>
        <div class="dots">
          <span class="like"></span>
          <span class="form">
            <i class="name">{{ dataBrife.promulgator }}</i>
             - 
            <i class="time">{{ dataBrife.time }}</i>
          </span>
        </div>
      </li>
    </ol> 
    <div class="brief-list">
        <div class="publish">
            <p v-on:click="briefShow = !briefShow">发布</p> 
        </div>
        <ul class="sift-list">
            <li v-for='(item, $index) in dataJson'>
                <p @click="getBrief(item.id),selectStyle(item, $index),checked=$index" :class="{'active':checked==$index}" >{{ item.name }}</p>
            </li>
        </ul>
    </div>
    <div class="brief-post" :class="{ active: briefShow }">
      <div class="post-box">
        <span class="close" v-on:click="briefShow = !briefShow"></span>
        <h3 class="title">提交新的一句话经验</h3>
        <p class="title-small">什么叫一句话经验？乍现而过的以一敌百的灵感，被坑的死去活来的bug，以及所有能用一句话表达出来的经验</p>
        <div class="brief-label">
          <h4>选择分类<small>（请选择一个分类）</small></h4>
          <div class="label-list">
            <span v-for="(item, $index) in dataJson" @click="labelIcon = $index" :class="{'active':labelIcon == $index}">{{ item.name }}</span>
          </div>
        </div>
        <div class="brief-content">
          <h4>正文内容<small>（建议不超过140个字）</small></h4>
          <textarea v-model="postBreif.postXX" placeholder="请输入正文内容"></textarea>
        </div>
        <div class="brief-btn">
          <input type="button" value="提交" @click="postData()">
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue';
export default {
  // 渲染数据
  data () {
    return {
      // 首先需要定义数据
      checked: 0,
      labelIcon: 0,
      dataJson: {},
      dataBrife: {},
      dataActive: {},
      active: false,
      briefShow: false,
      postBreif: {
        postXX: ''
      }
    };
  },
  // TODO: DOM加载完成后的钩子
  created: function () {
    this.getHttp();
    // 初加载的时候首先获取全部的内容
    this.getBrief(6);
  },
  // 自定义函数方法
  methods: {
    getHttp: function () {
      this.$http({
        method: 'get',
        url: '/api/sell/admin.php/myApi/getList',
        params: {
          id: 1
        }
      }).then((response) => {
        this.dataJson = response.data;
      }, (error) => {
        console.log(error);
      });
    },
    getBrief: function (num) {
      // 传参从后台获取数据并刷新DOM
      this.$http({
        method: 'get',
        url: '/api/sell/admin.php/myApi/getBrief',
        params: {
          class: num
        }
      }).then((response) => {
        this.dataActive = num;
        this.dataBrife = response.data[0];
      }, (error) => {
        console.log(error);
      });
    },
    selectStyle: function (item, index) {
      this.all = false;
      this.$nextTick(function () {
        this.dataJson.forEach(function (items) {
          Vue.set(items, 'active', false);
        });
        Vue.set(item, 'active', true);
      });
    },
    postData: function () {
      alert(this.postBreif.postXX);
      alert(this.labelIcon);
      if (this.postBreif.length > 0) {
        alert(this.postBreif.postXX);
      }
    }
  }
};
</script>
<style lang="scss">
@import '../../common/scss/fun.scss';

.brief{
  margin: 0;
  display: flex;
  justify-content: space-around;

  .brief-post{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0);
    transform: translateY(-100vh);
    transition: background 500ms ease;

    .post-box{
      width: 60vw;
      padding: 20px;
      border-radius: 5px;
      background: #fff;
      transform: translateY(-100px);
      opacity: 0;
      transition: all 300ms ease;

      .close{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        @extend %ani;

        &:hover{
          transform: rotate(90deg);
        }

        @mixin close($deg){
          content: '';
          height: 2px;
          width: 28px;
          background: #000;
          transform: rotate($deg);
          position: absolute;
          top: 0;
        }
        &:after{
          @include close(-45deg);
          right: 0;
          transform-origin: right center;
        }
        &:before{
          @include close(45deg);
          left: 0;
          transform-origin: left center;
        }
      }
      .title{
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
        font-weight: 300;
      }
      .title-small{
        width: 100%;
        text-align: center;
        margin: 0 0 20px 0;
        font-size: 0.7em;
        color: #808080;
      }
      .brief-label{
        margin: 20px 0;

        h4{
          font-weight: 300;
          margin-bottom: 10px;

          small{
            font-size: 0.7em;
            margin-left: 10px;
            color: #8f8f8f;
          }
        }
        .label-list{
          width: 100%;

          span{
            display: inline-block;
            padding: 2px 5px;
            margin-right: 4px;
            border-radius: 2px;
            border: 1px solid #808080;
            cursor: pointer;
            font-size: 0.8em;
            @extend %ani;
            
            &.active{
              background: #ff3300;
              color: #fff;
              border: 1px solid #ff3300;
            }
          }
        }
      }
      .brief-content{
        margin: 20px 0;

        h4{
          font-weight: 300;
          margin-bottom: 10px;

          small{
            font-size: 0.7em;
            margin-left: 10px;
            color: #8f8f8f;
          }
        }
        textarea{
          width: 100%;
          min-height: 80px;
          border-radius: 2px;
          border-color: #8f8f8f;
          resize: none;
          padding: 5px;
          font-size: 0.8em;
        }
      }
      .brief-btn{
        width: 100%;
        input{
          padding: 8px 26px;
          color: #fff;
          border-radius: 2px;
          cursor: pointer;
          @extend %ani;
          background: #5cb85c;
          border: 1px solid #4cae4c;
          
          &:hover{
              background: #449d44;
              border: 1px solid #398439;
          }
        }
      }
    }

    &.active{
      background: rgba(0, 0, 0, 0.8);
      transform: translateY(0);

      .post-box{
        opacity: 1;
        transform: translateY(0px);
      }
    }
  }
  ol{
    $W: 1200px * 0.8 - 10px;
    width: $W;
    min-height: 700px;
    margin-right: 20px;
    padding: 10px 40px;
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #d4d4d4;
    
    li{
      width: 100%;
      min-height: 60px;
      padding: 15px 0;
      cursor: pointer;
      border-bottom: 1px solid #e4e4e4;
      
      &:first-child{
        margin-top: 0;
      }
      &:last-child{
        margin-bottom: 0;
        border-bottom: none;
      }
      p{
        width: 100%;
        word-wrap: break-word;
        margin: 0 0 10px 0;
        line-height: 1.75em;
        text-align: justify;
      }

      .dots{

        .form{
          display: block;
          width: 100%;
          text-align: right;
          font-size: 0.7em;

          i{
            font-style: initial;
            color: #777;
          }
        }
      }
    }
  }

  .brief-list{
    $W: 1200px * 0.2 - 10px;
    width: $W;
  }
}
</style>
